<template>
    <div
        :id="`line${id}`"
        class="chart"
    />
</template>
<script>
import * as echarts from 'echarts'
export default {
    props: {
        lineData: {
            type: Array,
            default: () => []
        },
        id: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        lineData: {
            handler() {
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            deep: true
        }
    },
    mounted() {
        this.drawLine()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.changeSize, true)
    },
    methods: {

        drawLine() {
            if (this.myChart) {
                this.myChart.clear()
                this.$echarts.dispose(this.myChart)
            }
            var line_name = "";
            switch (this.id) {
                case 1:
                    line_name = "新增线索数";
                    break;
                case 2:
                    line_name = "新增客户数";
                    break;
                case 3:
                    line_name = "新增有效沟通";
                    break;
                case 4:
                    line_name = "新增上门客户";
                    break;
                case 5:
                    line_name = "新增商机数";
                    break;
                case 6:
                    line_name = "新增订单金额";
                    break;
                case 7:
                    line_name = "新增收款金额";
                    break;
                case 8:
                    line_name = "新增实收金额";
                    break;
            }
            let lineData = JSON.parse(JSON.stringify(this.lineData))
            let xdata = []
            let ydata = []
            lineData.forEach(element => {
                xdata.push(element.name)
                ydata.push(element.num)
            });
            let option = {
                color: ['#1890FF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: '0',
                    left: '0',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xdata,
                        boundaryGap: false,
                        show: false,
                        axisTick: {
                            show: false // 不显示坐标轴刻度线
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "rgba(230, 247, 255, 0.50)",
                            fontSize: 14
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        // y右侧文字
                        axisLabel: {
                            color: 'rgba(230, 247, 255, 0.50)',
                            fontSize: 16
                        },
                        // y轴的分割线
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(230, 247, 255, 0.20)'

                            }
                        }
                    }
                ],
                series: [
                    {
                        name: line_name,
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 不显示连接点
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        lineStyle: {
                            width: 1,
                            shadowColor: "#5482ee",
                            shadowBlur: 20
                        },
                        areaStyle: {
                            opacity: 1,
                            // 右下左上
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(24, 144, 255, .5)'
                                },
                                {
                                    offset: 0.3,
                                    color: 'rgba(24, 144, 255, 0.2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(24, 144, 255, 0)'
                                }
                            ])
                        },
                        data: ydata
                    }
                ]
            }

            this.myChart = this.$echarts.init(document.getElementById(`line${this.id}`))
            // 绘制图表
            this.myChart.setOption(option)
            window.addEventListener('resize', this.changeSize, true)
        },
        changeSize() {
            this.myChart.resize()
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
